<template>
	<view class="container">
		<view class="fgx u-m-t-28">
		</view>

		<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
			<u-form-item class="u-m-l-30 u-m-r-30" :required="required" label-width="200" :label-position="labelPosition" label="纪要标题"
			 prop="title">
				<u-input :border="border" placeholder="请输入" v-model="model.title" type="text" input-align="right"></u-input>
			</u-form-item>
			<view class="sctp u-m-l-40 u-m-r-30 u-m-t-40">
				<text class="hz">纪要内容</text>
			</view>
			<u-form-item class="  zwpj u-m-l-30 u-m-r-30 "  :label-position="labelPosition" prop="content">
				<u-input type="textarea" :border="border" placeholder="请输入纪要内容" v-model="model.content" />
			</u-form-item>
			<view @click="onUpload" class="qylg u-flex u-row-center" :style="{ backgroundImage: 'url(' + bjxm + ')' }">
				<image src="../../../static/img/jh.png" mode=""></image>
				<text>上传图片/文件</text>
			</view>
			<view class="tdxy u-m-l-30 u-m-t-30">
				<view class="word u-m-l-30 u-p-t-30">
					<image :src="getUrl(item)" mode="aspectFill" v-for="(item,index) in fileList" :key="index"></image>
				</view>
				<!-- <view class="sctime u-m-l-30 u-p-t-30">
				<text class="scsj">上传时间:</text>
				<text class="sctime">{{item.uploadTime}}</text>
			</view> -->
			</view>
			<view class="u-p-20">
				<u-button class="button" @click="submit">提交</u-button>
			</view>
		</u-form>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				bjxm: "../../static/img/sctpbj.png",
				/**
				 * form验证
				 * */
				model: {
					"businessId": 0,
					"content": "",
					"imgUrl": "",
					"title": "",
					"type": ""
				},
				rules: {
					title: [{
						required: false,
						message: '请输入纪要标题',
						trigger: 'blur'
					}],
					content: [{
						required: false,
						message: '请输入纪要内容',
						trigger: 'blur'
					}]
				},
				fileList: [],
				required: false,
				border: false,
				check: false,
				selectStatus: 'close',
				labelPosition: 'left',
				codeTips: '',
				errorType: ['toast'],
			}
		},
		onLoad(options) {
			console.log(options);
			if (options) {
				this.model.businessId = options.id;
				this.model.type = options.type;
			}
			if(options.userId){
				this.model.userId = options.userId;
			}
			console.log(this.model)
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			getUrl(url) {
				return this.$mConfig.baseUrl + url;
			},
			onUpload() {
				var that = this;
				if (that.fileList.length > 8) {
					uni.showToast({
						title: "最多只能上传9张",
						icon: "none"
					})
					return;
				}
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: this.$mConfig.baseUrl + "/commons/uploadFile", //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {},
							success: (uploadFileRes) => {
								console.log('uploadFileRes', JSON.parse(uploadFileRes.data).message);
								that.fileList.push(JSON.parse(uploadFileRes.data).message);
								console.log('that.fileList', that.fileList)
							}
						});
					}
				})
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.save();
					}
				});
			},
			async save() {
				this.model.imgUrl = this.fileList.join(',')
				let result = await this.$apis.saveMeetingRecord(this.model);
				if (result.code === 200) {
					uni.showToast({
						title: '提交成功',
						duration: 2000
					});
					uni.navigateBack({
						delta:1
					})
				}

			}
		},

	}
</script>

<style scoped lang="scss">
	.fgx {
		width: 100%;
		height: 20rpx;
		background-color: #F5F5F9;
	}

	.sctp {
		display: flex;
		flex-direction: column;

		.hz {
			color: #0D1D36;
			font-size: 30rpx;
		}

		.sm {
			color: #9DA2B0;
			font-size: 26rpx;
			line-height: 44rpx;
			margin-top: 38rpx;
		}
	}

	.zwpj {
		width: 690rpx;
		height: 260rpx;
		background-color: #F5F5F9;
		margin-top: 40rpx;
		font-size: 30rpx;
		color: #F5F5F9;
		border-radius: 10rpx;
		line-height: 44rpx;
	}

	.qylg {
		width: 250rpx;
		height: 52rpx;
		margin-left:30rpx;
		background-size: 100% auto;
		background-position: 0 bottom;
		margin-top: 30rpx;
		overflow: hidden;
		text-align: center;
		text {
			color: #888D99;
			font-size: 26rpx;
			line-height: 118rpx;
		}

		image {
			width: 29rpx;
			height: 29rpx;
		}
	}

	.button {
		width: 662rpx;
		margin: 50px auto;
		background: #ab61ff;
		border-radius: 40rpx;
		border: 0;
		color: #fff;

		&.u-hairline-border:after {
			border: 0;
		}
	}

	.word {

		image {
			margin-right: 20rpx;
			margin-bottom: 20rpx;
			width: 200rpx;
			height: 200rpx;
		}
	}
</style>
